<template>
    <div class="app-container" v-loading="loading">
        <div class="btn-container">
            <el-button @click="show(1)" autofocus>第一张</el-button>
            <el-button @click="show(2)">第二张</el-button>
            <el-button @click="show(3)">第三张</el-button>
            <el-button @click="show(4)">第四张</el-button>
            <el-button @click="show(5)">第五张</el-button>
        </div>
        <div class="temp" v-show="showNum === 1">
            <temp ref="temp1" :form.sync="banners[0]" @initForm="initForm(0)" @initList="initList"></temp>
        </div>
        <div class="temp" v-show="showNum === 2">
            <temp ref="temp2" :form.sync="banners[1]" @initForm="initForm(1)" @initList="initList"></temp>
        </div>
        <div class="temp" v-show="showNum === 3">
            <temp ref="temp3" :form.sync="banners[2]" @initForm="initForm(2)" @initList="initList"></temp>
        </div>
        <div class="temp" v-show="showNum === 4">
            <temp ref="temp4" :form.sync="banners[3]" @initForm="initForm(3)" @initList="initList"></temp>
        </div>
        <div class="temp" v-show="showNum === 5">
            <temp ref="temp5" :form.sync="banners[4]" @initForm="initForm(4)" @initList="initList"></temp>
        </div>
        <div class="submit">
            <el-button type="primary" @click="saveObj">保存</el-button>
            <el-button>取消</el-button>
        </div>
    </div>
</template>
<script>
import temp from './bannerTemp'
import { labourbanner_listAll, labourbanner_save, labourbanner_edit } from '@/api/labourbanner'
export default {
    data() {
        return {
            banners: [{ file_path: '' }, { file_path: '' }, { file_path: '' }, { file_path: '' }, { file_path: '' }],
            showNum: 1,
            loading: false
        }
    },
    components: { temp },
    methods: {
        show(num) {
            this.showNum = num;
        },
        async saveObj() {
            this.loading = true;
            // const check = [1, 2, 3, 4, 5];
            // for (let i = 0; i < check.length; i++) {
            //     const num = check[i];
            //     const form = this.$refs['temp' + num].form;
            //     if (form.link_url && form.file_path) {
            //         this.banners.push(form);
            //     }
            // }
            let form = this.banners[this.showNum - 1];
            if (form.file_path == '') {
                this.$message.warning("请上传图片");
                this.loading = false;
                return;
            }
            if (form.id) {
                const { data } = await labourbanner_edit({
                    banner_path: form.file_path,
                    link_url: form.link_url,
                    id: form.id,
                    organization_id: 0
                })
                this.loading = false;
                if (data.status === 100) {
                    this.$message.success("编辑成功");
                }
            } else {
                const { data } = await labourbanner_save({
                    company_id: localStorage.getItem("companyId")-0,
                    banner_path: form.file_path,
                    link_url: form.link_url,
                    organization_id: 0

                });
                this.loading = false;
                if (data.status === 100) {
                    this.$message.success("保存成功");
                }
            }
            await this.initList();
        },
        async initList() {
            this.loading = true;
            const { data } = await labourbanner_listAll({ company_id: localStorage.getItem("companyId")-0, organization_id: 0 });
            this.loading = false;
            if (data.status === 100) {
                this.banners = this.initBanner(data.data.rows);
            }
        },
        initForm(num){
            this.banners[num] = {file_path: ''}
        },
        initBanner(datas) {
            let result = []
            for (let i = 0; i < 5; i++) {
                let banner = datas[i];
                if (banner) {
                    result[i] = { ...banner, file_path: banner.banner_path }
                } else {
                    result[i] = {
                        company_id: localStorage.getItem("companyId")-0,
                        file_path: '',
                        link_url: ''
                    }
                }
            }
            return result;
        }
    },
    created() {
        this.initList();
    }
}
</script>
<style lang="scss" scoped>
.btn-container {
    display: flex;
    justify-content: flex-start;
}

.temp {
    margin-top: 20px;
}

.submit {
    margin-top: 40px;
    margin-left: 20%;
}
</style>
